import './App.css'
import { menuFilter, test } from '@/utils/tools'
// import {Button, Card} from 'antd'
import MainLayout from './layout'
import Login from './views/Login'
import { Route, Routes } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { IMenuType, mainRoutes } from './router'
import RequireAuth from './auth/RequireAuth'
import { useAccount } from './store/user'
import NotFound from './views/NotFound'
test()
function App() {
  let [realRoute,setRealRoute] = useState<Array<IMenuType>>([])
  const {userInfo} = useAccount()
  useEffect(()=>{
    let arr:IMenuType[] = []
    let filterRoutes = mainRoutes
    if(userInfo){
      filterRoutes = menuFilter(userInfo.permission)
    }
    filterRoutes.forEach(item=>{
      if(item.children){
        arr = [...arr,...item.children]
      }else{  
        arr.push(item)
      }
    })
    setRealRoute(arr)
  },[])
  return (
    <>
      {/* <Button type="primary">按钮</Button> */}
      {/* <Card>卡片组件</Card> */}
      {/* <MainLayout/> */}
      {/* <Login/> */}
      <Routes>
        <Route path='/' element={<RequireAuth><MainLayout/></RequireAuth>}>
            {realRoute.map(item=>{
              return <Route path={item.key} element={item.element} key={item.key}/>
            })}
            <Route path='*' element={<NotFound/>}/>
        </Route>
        <Route path='/login' element={<Login/>}></Route>
      </Routes>
    </>
  )
}

export default App
